<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Nonograms Solver</title>
  <link rel="stylesheet" href="https://unpkg.com/poplar-css@latest/dist/poplar.css">
  <style>
    .puzzle { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto 1fr; line-height: 20px; }
    .horizontal:nth-child(5n):not(:last-child) { border-right: 2px solid transparent; }
    .vertical:nth-child(5n):not(:last-child) { border-bottom: 2px solid transparent; }
    .row:nth-child(5n):not(:last-child) { border-bottom: 2px solid #333; }
    .column:nth-child(5n):not(:last-child) { border-right: 2px solid #333; }
    .cell { box-sizing: border-box; color: #fff; height: 20px; vertical-align: top; width: 20px; }
    button[class^=button-] { margin-top: 10px; }
  </style>
</head>
<body>

  <div id="root"></div>

  <!-- <script src="v0candidate.js"></script> -->
  <!-- <script src="v1exhaustive.js"></script> -->
  <!-- <script src="v2oxtest.js"></script> -->
  <script src="v3colored.js"></script>
  <script src="puzzles.js"></script>
  <script>
    // puzzles.slice(0, 15).forEach(item => console.log(new Nonograms(item)))
  </script>
  <script src="https://unpkg.com/react/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
  <script type="text/babel">
    const { Fragment, useState, useEffect, useCallback } = React

    const App = () => {
      const [color, setColor] = useState(colors[27] || { A: '#000000' })
      const [numbers, setNumbers] = useState(puzzles[27])
      const [grid, setGrid] = useState(() => {
        return Array(numbers[0].length).fill('').map(() => Array(numbers[1].length).fill('u'))
      })

      const [inputColor, setInputColor] = useState('')
      const [inputNumber, setInputNumber] = useState('')
      const submit = useCallback(() => {
        if (inputColor) {
          const color = JSON.parse(inputColor)
          setColor(color)
        }
        if (inputNumber) {
          const numbers = JSON.parse(inputNumber)
          setNumbers(numbers)
          setGrid(Array(numbers[0].length).fill('').map(() => Array(numbers[1].length).fill('u')))
        }
      }, [inputColor, inputNumber])

      const solve = useCallback(() => {
        const pause = false
        const nono = new Nonograms(numbers, color, 10000, pause)
        setGrid(nono.latest)
        if (!pause) {
          const t = window.setInterval(() => {
            setGrid(nono.latest)
            if (nono.solved) {
              window.clearInterval(t)
              console.log(nono)
            }
          }, 100)
        }
      }, [numbers])

      const reset = useCallback(() => {
        setNumbers([[], []])
        setGrid([[], []])
      }, [])

      return (
        <div className="puzzle text-sm text-center">
          <div></div>
          <div className="flex">
            {numbers[1].map((item, i) => (
              <div key={i} className="horizontal flex-column main-content-end">
                {item.map((num, j) => {
                  if (/^[a-z]/i.test(num)) {
                    return <div key={j} className="cell" style={{ backgroundColor: color[num[0]] }}>{num.substring(1)}</div>
                  } else {
                    return <div key={j} className="cell" style={{ color: "#000" }}>{num}</div>
                  }
                })}
              </div>
            ))}
          </div>
          <div></div>

          <div className="flex-column">
            {numbers[0].map((item, i) => (
              <div key={i} className="vertical flex main-content-end">
                {item.map((num, j) => {
                  if (/^[a-z]/i.test(num)) {
                    return <div key={j} className="cell" style={{ backgroundColor: color[num[0]] }}>{num.substring(1)}</div>
                  } else {
                    return <div key={j} className="cell" style={{ color: "#000" }}>{num}</div>
                  }
                })}
              </div>
            ))}
          </div>
          {(numbers[0].length && numbers[1].length) ? (
            <div className="flex-column">
              {grid.map((r, i) => (
                <div key={i} className="row flex">
                  {r.map((c, j) => (
                    <div key={j} className="column">
                      <input className="cell" style={{ backgroundColor: color[c] }} readOnly />
                    </div>
                  ))}
                </div>
              ))}
            </div>
           ) : (
             <div>
              <textarea style={{ display: "block" }} cols="80" onChange={e => setInputColor(e.target.value)} />
              <textarea
                placeholder={`[
    [[3], [3, 1], [1, 2], [1, 1], [1]],
    [[3], [2], [2, 1], [1], [4]]
  ]`}
                rows="10"
                cols="80"
                onChange={e => setInputNumber(e.target.value)}
              />
            </div>
          )}
          <div></div>

          <div></div>
          {numbers[0].length && numbers[1].length
            ? <button className="button-black button-sm radius-sm" onClick={solve}>解题</button>
            : <button className="button-black button-sm radius-sm" onClick={submit}>确定</button>}
          <div></div>

          <div></div>
          <button className="button-white button-sm radius-sm" onClick={reset}>重置</button>
          <div></div>
        </div>
      )
    }

    ReactDOM.render(<App />, document.querySelector('#root'))
  </script>

</body>
</html>